<template>
<div class="container">
  <div style="width: 102%" >
    <el-table class="custom-table" :data="orderList" style="width: 102%"  row-key="id">
      <el-table-column type="index" width="50"></el-table-column>
      <el-table-column prop="userName"  width="120" label="用户名"></el-table-column>
      <el-table-column prop="phone"  width="120" label="电话"></el-table-column>
      <el-table-column prop="orderTime"  width="180" label="下单时间"></el-table-column>
      <el-table-column prop="orderNum" label="订单号"  width="140"></el-table-column>
      <el-table-column prop="goodsName" label="下单餐品"  width="180"></el-table-column>
      <el-table-column prop="price" label="总价"  width="120"></el-table-column>

      <el-table-column prop="tableNum" label="桌号"  width="60"></el-table-column>
      <el-table-column prop="status" label="订单状态"  width="120"></el-table-column>
      <el-table-column label="操作"  width="180">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" circle @click="updateStatus(scope.row)"></el-button>
          <el-button type="danger" icon="el-icon-delete" circle  @click="deleteOrder(scope.row)"></el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</div>
</template>


<script>
export default {
  data() {
    return {
      currentPage: 1,
      pagesize: 10,
      total: 0,
      orderList: [],
    };
  },
  mounted() {
    this.querypage();
  },

  methods: {
    handleSizeChange(val) {
      this.pagesize = val;
      this.querypage();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.querypage();
    },
    querypage: async function () {
      let result = await this.$http.get(
        "/order/pageAll/current/" + this.currentPage + "/size/" + this.pagesize
      );
      this.orderList = result.data.list;
      this.total = result.data.total;
    },

    deleteOrder(row) {
      this.$confirm("此操作将删除该订单, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http.delete(`/order/del/${row.id}`).then((response) => {
            if (response.status === 200) {
              this.showOrderTable();
              this.$message.success("删除成功");
            } else {
              this.$message.error(response.message || "删除失败");
            }
          });
        })
        .catch(() => {
          this.$message.info("已取消删除");
        });
    },
  },
};
</script>

<style scoped>
.container {
 background-color: aquamarine;
  background-size: cover; 
  background-position: center; /* 背景图像居中显示 */
  background-repeat: no-repeat; /* 防止背景图像重复 */
  width: 100%; /* 确保容器占满整个可用宽度 */
  min-height: 100vh; /* 最小高度为视口高度，确保背景覆盖整个视口 */
  display: flex;
  flex-direction: column;
}

.custom-table .el-table__body-wrapper {
  background-color: #e03535; 
}

.custom-table .el-table__row:hover {
  background-color: #3cc46c; /* Slightly darker gray on hover */
}




</style>